<template>
  <Dialog
    title="新增用户"
    :destroy-on-close="true"
    :visible="addDialogVisible"
    @close="hangleCloseAddDialog"
    width="24%"
    top="40vh"
  >
    <el-form :model="form" :rules="rules" ref="formRef" class="myform">
      <el-form-item label-width="80px" label="用户名" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>

      <el-form-item label-width="80px" label="手机号" prop="phone">
        <el-input v-model="form.phone"></el-input>
      </el-form-item>

      <el-form-item label-width="80px" label="角色" prop="role">
        <el-select v-model="form.role" placeholder="请选择角色">
          <el-option
            v-for="item in options['角色']"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item v-if="form.role === '指导老师'" label-width="80px" label="所在社团" prop="organization">
        <el-select v-model="form.organization"  placeholder="请选择所在社团">
          <OrganizationOption></OrganizationOption>
        </el-select>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="hangleCloseAddDialog">取消</el-button>
        <el-button type="primary" @click="hangleConfirm">确认</el-button>
      </span>
    </template>
  </Dialog>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from 'element-plus';

import OrganizationOption from "@/components/common/OrganizationOption.vue";
import Dialog from '@/components/common/Dialog.vue';

import { checkPhone } from '@/utils/check.ts';
import { options } from "@/data/select.ts";

const props = defineProps(["addDialogVisible", "form"]);
const emits = defineEmits(["closeAddDialog", "confirm"]);

const formRef = ref<FormInstance>()

const rules = reactive<FormRules>({
  username: [
    {
      required: true,
      message: '请输入用户名',
      trigger: 'change',
    },
  ],
  phone: [
    {
      required: true,
      message: '请输入手机号',
      trigger: 'change',
    },
    {
      validator: checkPhone,
      trigger: 'blur'
    }
  ],
  role: [
    {
      required: true,
      message: '请选择角色',
      trigger: 'change',
    },
  ],
  organization: [
    {
      required: true,
      message: '请选择所在社团',
      trigger: 'change',
    },
  ],
});

const hangleCloseAddDialog = () => {
  emits("closeAddDialog");
};

const hangleConfirm = async () => {
  if (formRef.value) {
    await (formRef.value as FormInstance).validate((valid: boolean, fields) => {

      if (valid) {
        emits("confirm");
      } else {
        console.log(fields);
      }
    })
  }
};
</script>

<style lang="less" scoped>
.myform {
  // margin-top: 20px;
  margin-right: 20px;

  :deep(.el-select) {
    width: 100%;
  }
}
</style>
